<%--
  Created by IntelliJ IDEA.
  User: 跟我走吧灬
  Date: 2020/11/23
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
    <style>
        #roomStatus {
            width: 80px;
        }

        #addRoomCode {
            width: 80px;
        }

        #roomType {
            width: 80px;
        }

        .layui-form-label {
            width: 80px;
        }
        .layui-form-selectup dl {
            top: 42px;
            bottom: unset;
        }
    </style>
</head>
<body>
<%--    查询--%>
<div id="min">
    <form class="layui-form" action="" id="adataform" lay-filter="ggg">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 50px">房间号</label>
            <div class="layui-input-inline">
                <input type="text"  name="roomnumber" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">房间类型</label>
            <div class="layui-input-inline">
                <input type="text"  name="name" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo2">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="re">重置</button>
        </div>

    </form>
</div>



<!-- 这里是模板 弹出层里的内容 -->
<form id="addform" class="layui-form" lay-filter="addRoom" style="display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">请输入房间名:</label>
        <div class="layui-input-block">
            <input id="addRoomCode" type="text" name="roomcode" lay-verify="title" autocomplete="off"
                   class="layui-input" lay-filter="roomcode"><span id="span" style="color: red;font-size: 10px"></span>
        </div>
    </div>
    <%--<div class="layui-form-item">
        <label class="layui-form-label">请选择房间状态:</label>
        <div class="layui-input-block">
            <select id="roomStatus" name="status" lay-verify="required" lay-filter="roomStatus">
                <option value="0">正常</option>
                <option value="1">禁用</option>
            </select>
        </div>
    </div>--%>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择房间类型:</label>
        <div class="layui-input-block">

            <select id="roomType" name="typeid" lay-verify="required" lay-filter="roomType"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="addbtn" class="layui-btn" lay-submit lay-filter="addRoom">立即提交</button>
        </div>
    </div>
</form>

<div id="caozuo" style="display: none">
    <input type="hidden" id="hid">
    <button id="one" class="layui-btn layui-btn-warm layui-btn-radius">停用</button>
    <button id="two" class="layui-btn layui-btn-danger layui-btn-radius" >恢复</button>
</div>


<!--显示的主 table -->
<table class="layui-hide" id="room" lay-filter="room"></table>
<!--右侧工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <%--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
    <button lay-event="caozuo" class="layui-btn layui-btn-warm layui-btn-xs">操作</button>
</script>
<!--头部里的按钮  添加  -->
<script type="text/html" id="toolbarHead">
    <a id="add" class="layui-btn layui-btn-xs">添加</a>
</script>
<script>
    layui.use(['table','jquery','form','layer'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var layer=layui.layer;

        table.render({
            elem: '#room' //id为test的table
            , url: '${pageContext.request.contextPath}/roomquery/queryRoom'   //url 查询数据   所有的客户的数据
            , toolbar: '#toolbarHead' //开启头部工具栏，并为其绑定左侧模板
            , title: '房间信息'
            , cols: [[
                {field: 'id', title: 'ID', fixed: 'left', sort: true},
                {field: 'roomcode', title: '房间号', fixed: 'left',sort: true},
                {field: 'name', title: '房间类型', fixed: 'left', sort: true},
                {field: 'status', title: '状态', sort: true, templet: function (res) {
                        //res  这一行的内容
                        var s = res.status;//状态值
                        if (s == 0) {
                            //正常
                            return "正常";
                        } else {
                            return "入住";
                        }
                    }
                },

                // {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true
            ,limit:5
            ,limits:[5,10,15,20]
            , done: function (res, curr, count) {
                var that = this.elem.next();
                res.data.forEach(function (item, index) {
                    if (item.status === 1) {
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                        tr.css("background-color", "gray");//目标单元格颜色
                        tr.css("color", "white");//被选中的单元格字体颜色 ：后勤部
                    }
                });
            }, parseData: function (res) {
                if (res.code == -1) {
                    layuiHelp.AlertMsg(res.msg, res.icon);
                }
            }
        });


        form.on('submit(demo2)',function (data){

            table.reload("room",{
                page:{
                    curr:1
                },where:data.field
            })
            return false;
        })
        $("#re").click(function (){
            location=location;
        })

        //监听行工具事件  test  表格的id
        table.on('tool(room)', function (obj) {
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    // obj.del();//页面删除
                    $.ajax({
                        url: "${pageContext.request.contextPath}/roomquery/deleteId",
                        type: "post",
                        data:{id:data.id},
                        success:function () {
                            layer.close(index);
                            window.location.reload();
                        },error:function () {
                            alert("服务器错误")
                        }
                    });

                });
            } else if (obj.event === 'edit') {
                // 点击编辑按钮后调用

                // 弹窗
                layer.open({
                    type: 1,
                    title: "修改房间",
                    content: $("#addform"),
                    area: ['500px', '350px']
                    ,offser:'50px',
                    moveOut:true
                });

                // 赋值
                form.val("addRoom", {
                    "roomcode": data.roomcode,
                    "roomtype":data.roomtype
                });

                // 向select中动态赋值
                queryRoomType();

                // 参数检验
                $("#addRoomCode").blur(function () {
                    checkRoomCode($("#addRoomCode").val());
                });
                // 表单 提交按钮的监听事件  form.on('submit(addRoom)') submit-->lay-submit addRoom--> lay-filter
                form.on('submit(addRoom)', function (data) {
                    $.ajax({
                        async: true,
                        url: "${pageContext.request.contextPath}/roomquery/updateRoom",
                        type: "post",
                        dataType: "JSON",
                        data: {
                            /*
                            * data 里的 key 要和实体类里的属性保持一致
                            */
                            "id": obj.data.id, //   这里必须写出 obj.data.id 的形式 否则会获取不到值
                            "roomcode": $("#addRoomCode").val(), // input 里的值 并不是 table 里的值
                           // "status": $("#roomStatus").val(),
                            "typeid": $("#roomType").val(),
                        },
                        error: function () {
                                alert("123");
                            }
                    });
                    table.reload('room');

                });
            }else if (obj.event === 'caozuo') {
                /*confirmTrans: function(){*/
                //配置一个透明的询问框
                layer.msg('', {
                    content: $("#caozuo"),
                    closeBtn: 1,
                    time: 0,
                    cancel: function () {
                        location = location;
                    },
                    success: function () {
                        $("#hid").val(data.id)
                    }
                });
            }


            $("#one").click(function (){
                var id=$("#hid").val();
                /* layer.closeAll();*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/roomquery/bad",
                    data:{id:id},
                    async:false,
                    success:function (d){
                        if (d>0){
                            layer.msg("已停用")
                        }
                    },error:function (){
                        alert(55)
                    }
                })
                setTimeout(function() {
                    window.location.reload();
                },400);
            })

            $("#two").click(function (){
                var id=$("#hid").val();
                /* layer.closeAll();*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/roomquery/good",
                    data:{id:id},
                    async:false,
                    success:function (d){
                        if (d>0){
                            layer.msg("已恢复");
                        }
                    },error:function (){
                        alert(66)
                    }
                })
                setTimeout(function() {
                    window.location.reload();
                },400);
            })





        });

        // 添加房间按钮点击时执行的方法
        $("#add").click(function () {
            layer.open({
                type: 1,
                title: "添加房间",
                content: $("#addform"),
                moveOut:true,
                area: ['500px', '350px']
                ,offset: '50px'
            });
            // 向房间类型下拉框中动态添加数据
            queryRoomType();
            $("#addRoomCode").blur(function () {
                checkRoomCode($("#addRoomCode").val());
            });

            form.on('submit(addRoom)', function (data) {
                $.ajax({
                    url: "${pageContext.request.contextPath}/roomquery/addRoomQuery",
                    type: "post",
                    data: data.field,
                    success:function(){
                        layer.closeAll();
                        //刷新一下table
                        window.location.reload();
                    },
                    error: function () {
                        alert("服务器错误");
                    }
                });
                return false;
            });
        });

        // 向房间类型下拉框中动态添加数据
        function queryRoomType() {

            $.ajax({
                async: false,
                url: "${pageContext.request.contextPath}/roomquery/queryRoomType",
                type: "post",
                dataType: "JSON",
                success: function (data) {
                    $("#roomType").empty();
                    $.each(data, function (index, item) {
                        $("#roomType").append("<option value=" + item.id + ">" + item.name + "</option>")
                    });
                    form.render("select");
                },
                error: function () {
                    alert("error");
                }
            });
        }

        // 检验参数
       function checkRoomCode(roomcode) {
            $.ajax({
                url: "${pageContext.request.contextPath}/roomquery/selectRoomNumber",
                type: "post",
                dataType: "JSON",
                success:function (r) {
                    if (r>0){
                        $("#addbtn").attr("disabled",true);
                    }else {
                        $("#span").html("");
                        $("#addbtn").attr("disabled",false);
                    }
                }
            })
        }
    });
</script>

</body>
</html>
